<template>
    <div>


        <div style="margin: 10px 0">
            <el-input v-model="category" style="width: 200px" placeholder="请输入文章类别"
                      suffix-icon="el-icon-search"></el-input>
            <el-input v-model="tag" style="width: 200px;margin-left: 10px" placeholder="请输入文章标签"
                      suffix-icon="el-icon-search"></el-input>
            <!-- <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message"
                       class="ml-5"></el-input>
             <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position"
                       class="ml-5"></el-input>-->
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
            <!--<el-button type="primary" @click="open">新增 <i class="el-icon-circle-plus-outline"></i></el-button>-->
            <!--<el-button type="danger" @click="deleteBatch">批量删除 <i class="el-icon-remove-outline"></i>-->
            <!--</el-button>-->
       <!--     <el-button type="primary">导入 <i class="el-icon-bottom"></i></el-button>
            <el-button type="primary"  >导出 <i class="el-icon-top"></i></el-button>-->
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
                  @selection-change="handleSelectionChange"  size="medium"
        >

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
           <!-- <el-table-column prop="id" label="ID" width="60"></el-table-column>-->
            <el-table-column
                    prop="articleCover"
                    label="文章封面"
                    width="180"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-image
                            class="article-cover"
                            :src="
              scope.row.img
                ? scope.row.img
                : 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png'
            "
                    />

                </template>
            </el-table-column>
            <el-table-column prop="author" label="作者" width="150">
            </el-table-column>
            <el-table-column prop="title" label="文章名称" >
            </el-table-column>
            <el-table-column prop="category" label="分类" width="100">
                <template slot-scope="scope">
                    <el-tag >
                        {{scope.row.category }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="tag" label="标签" width="80">
                <template slot-scope="scope">
                    <el-tag type="success">
                        {{scope.row.tag }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="counts" label="点赞数" width="60">
            </el-table-column>
            <el-table-column prop="time" label="发布时间" width="180">
            </el-table-column>
            <el-table-column prop="utime" label="更新时间" width="150">
            </el-table-column>
            <el-table-column prop="flag" label="是否公开" width="80">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.flag === true?'success':''">
                        {{scope.row.flag === false?'私密':'公开'}}
                    </el-tag>
                </template>

            </el-table-column>
            <el-table-column prop="isEnable" label="是否封禁" width="80">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.isEnable === true?'success':'danger'">
                        {{scope.row.isEnable === false?'封禁':'正常'}}
                    </el-tag>
                </template>

            </el-table-column>
            <el-table-column label="详情" width="90" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-message" circle @click="edit(scope.row)"></el-button>

                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog
                title="用户信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form" label-width="120px">
                <el-form-item label="用户名">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.nick" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="选择角色">
                    <el-select  clearable v-model="form.role" v-if="form.role==1 ? '管理员':'普通用户'" placeholder="请选择角色" style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
   import request from '../utils/request'
    export default {
        name: "User",
        data(){
            return{
                options: [{
                    value: '1',
                    label: '管理员'
                }, {
                    value: '0',
                    label: '普通用户'
                }],
                roles:[],
                headerBg: 'headerBg',
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 5,
                category: "",
                tag: "",
                dialogVisible: false,
                form: {},
                //批量删除
                multipleSelection: []
            }
        },
        created() {
             //请求数据
            this.load()

        },
        methods:{
            //导出
            exportExcel(){
                window.open("http://119.3.156.254:80/person/export")
            },


            deleteBatch() {
                let ids = this.multipleSelection.map(v => v.id)  //将对象数变为纯id数组
                this.$confirm('确定批量删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post("/user1/del/batch", ids).then(res => {
                        if (this.ids == null) {
                            this.$toast({
                                type: 'warning',
                                message: '请选择数据!'
                            });
                            return
                        }
                        if (res) {
                            this.$toast({
                                type: 'success',
                                message: '批量删除成功!'
                            });
                            this.load()
                        } else {
                            this.$toast({
                                type: 'error',
                                message: '批量删除失败!'
                            });
                        }

                    })

                }).catch(() => {
                    this.$toast({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            //删除
            delete1(id) {
                this.$confirm('确定删除此条的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.delete("/person/delete/" + id).then(res => {
                        if (res) {
                            this.$toast({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.load()
                        } else {
                            this.$toast({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }

                    })

                }).catch(() => {
                    this.$toast({
                        type: 'success',
                        message: '已取消删除'
                    });
                });
            },

            //更新
            edit(row) {

                this.$router.push({
                    path: '/articles/',
                    query: {id: row.id}
                })
            },

            //新增
            save() {

                request.post("/person/save", this.form).then(res => {
                    if (res) {
                        this.$toast({
                            type: "success",
                            message: "保存成功"

                        })
                        this.dialogVisible = false
                        this.load()
                    } else {
                        this.$toast({
                            type: "error",
                            message: "保存失败"
                        })
                    }
                })
            },
            //新增弹窗
            open() {
                this.dialogVisible = true
                this.form = {}
            },
            //重置
            reset() {
                this.category = "",
                    this.tag = ""
                this.load()
            },

            //分页
            load() {
                request.get("/article/page", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        category: this.category,
                        tag: this.tag
                    }
                }).then(res => {
                    this.tableData = res.records
                    this.total = res.total
                })


                request.get("/role").then(res=>{
                    console.log(res)
                    this.roles=res.data
                })

                /* fetch("http://localhost:9091/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username+"&nickname="+this.nickname).then(res => res.json()).then(res => {
                     console.log(res)
                     this.tableData = res.data
                     this.total = res.total
                 })*/
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.load()
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.pageNum = val
                console.log(`当前页: ${val}`);
                this.load()
            }
        }
    }
</script>

<style>
    .headerBg {
        background: #eee !important;
    }
</style>
